<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding-bottom: 800px;
            padding-left: 30px;
        }

        .user-list {
            width: 100%;
            margin: 20px auto;
            display: flex;
            flex-wrap: wrap;

        }

    </style>
    <link rel="stylesheet" href="./components/UserCard/UserCard.css">
</head>

<body>
    

    <div id="app">
        <h4>以组件构成 UserCard 并完成页面渲染操作</h4>
        <div class="user-list">
            <!-- <user-card v-bind:user="users[0]"></user-card>
            <user-card v-bind:user="users[1]"></user-card>
            <user-card v-bind:user="users[2]"></user-card>
            <user-card v-bind:user="users[3]"></user-card> -->
            <user-card v-for="u in users" :user=" u "></user-card>
        </div>
    </div>
    <script src="../../assets/mock/mock-min.js"></script>
    <script type="module">
        import axios from "../../assets/axios-es/axios.js";
        import { createApp } from "../../assets/vue3/vue.esm-browser.js"
        import UserCard from "./components/UserCard/UserCard.js";
        createApp({
            components: {
                UserCard,
            },
            data() {
                return {
                    // users: Mock.mock({
                    //     "users|10": [
                    //         {
                    //             No: "@id",
                    //             name: "@cname",
                    //             "sex|1": ["男", "女", "未知"],
                    //             tel: /^1\d{10}$/,
                    //             img: "https://api.ixiaowai.cn/mcapi/mcapi.php?_=@datetime('T')",
                    //         }
                    //     ]
                    // }).users,
                    users:[]
                }
            },
            methods: {
                async loadUsers() {
                    let { data } = await axios.get("http://localhost:3000/users")
                    this.users = data;
                }
            },
            created () {
                this.loadUsers();
            },
        }).mount("#app")
    </script>
</body>

</html>